<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="jquery.carousel.css">
	<style type="text/css">
		.container {
			width: 840px;
			margin: 0 auto;
		}
		img {
			width: 600px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="xu-carousel">
			<ol class="xu-carousel-mark">
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ol>
			<ul class="xu-carousel-body">
				<li><img src="img/1.jpg" alt=""></li>
				<li><img src="img/2.jpg" alt=""></li>
				<li><img src="img/3.jpg" alt=""></li>
				<li><img src="img/4.jpg" alt=""></li>
			</ul>
			<a class="xu-prev" href="javascript:void(0)">&lsaquo;</a>
			<a class="xu-next" href="javascript:void(0)">&rsaquo;</a>
		</div>
		
		<div id="set">
			<p>
				播放效果：<input type="radio" name="effect" value="fade" >淡入淡出
				<input type="radio" name="effect" value="left" checked>滑动播放
			</p>
			<p>
				循环播放：<input type="radio" name="loop" value="true">是
				<input type="radio" name="loop" value="false" checked>否
			</p>
			<p>
				播放间隔：<input type="text" value="3000" name="delayTime">ms
			</p>
			<p>
				自动播放：<input type="radio" name="auto" value="true" checked>是
				<input type="radio" name="auto" value="false">否
			</p>
		</div>
	</div>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.carousel.js"></script>
	<script type="text/javascript">
		$(function(){
			var carousel = $('.carousel').carousel({
				loop:false,
				effect:'left',
				autoPlay:true,
				delayTime:3000
			});

			$('input[name=loop]').change(function() {
				if( $(this).val() === 'true' ) {
					carousel.set({loop:true})
				}else {
					carousel.set({loop:false})
				}
			})
			$('input[name=auto]').change(function() {
				if( $(this).val() === 'true' ) {
					carousel.set({autoPlay:true})
				}else {
					carousel.set({autoPlay:false})
				}
			})
			$('input[name=delayTime]').blur(function() {
				carousel.set({delayTime:$(this).val()})
			})
			$('input[name=effect]').change(function() {
				carousel.set({effect:$(this).val()})
			})

		})

	</script>
</body>
</html>